<template >
  <div class="auo-transfer-panel">
    <a-typography-title :level="5">{{ $t("ziJi-3") }}</a-typography-title>
    <a-space direction="vertical" style="width: 100%">
      <div>
        <a-tooltip placement="top">
          <template #title>
            <span>{{ $t("ruoK") }}</span>
          </template>
          <a-button type="text">
            <template #icon>
              <QuestionCircleOutlined />
            </template>
          </a-button>
        </a-tooltip>
        <span style="margin-right: 10px">{{ $t("ziJi-4") }}</span>

        <a-switch
          v-model:checked="autoTransferStatus"
          @click="handleAutoTransferStatus"
          :loading="switchLoading"
        />
      </div>

      <a-spin :spinning="loading">
        <a-row style="border-top: 1px solid #ccc">
          <a-col
            :span="12"
            v-for="(item, index) in gameList"
            :key="'game-channel-item' + index"
          >
            <div class="wallet-item">
              <p class="channel-title">{{ item.name }}</p>
              <div class="channel-balance">
                <span data-num="0" class="balance">{{
                  formatCurrency(item.balance)
                }}</span>
                <a-button
                  size="small"
                  style="margin-right: 5px"
                  :loading="item.loading"
                  @click="handelSingleGameRecycling(item, index)"
                >
                  <span>{{ $t("yiJi-1") }}</span>
                </a-button>
              </div>
            </div>
          </a-col>
        </a-row>
      </a-spin>
    </a-space>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { QuestionCircleOutlined } from "@ant-design/icons-vue";
import { editAntoTransferSetting } from "@/api/account";
import { walletTransfer } from "@/api/financial";
import { formatCurrency } from "@/utils";
import { message } from "ant-design-vue";
import { useGameChannelStore } from "@/stores/gameChannel";
import { useUserStore } from "@/stores/userInfo";
import { useI18n } from "vue-i18n";
import { useGameInfoStore } from '@/stores/gameInfo';
const { t } = useI18n();
const switchLoading = ref<boolean>(false);
const gameChannelStore = useGameChannelStore();
const gameInfoStore = useGameInfoStore();
const { user, updateUserInfo } = useUserStore();

const autoTransferStatus = computed(() => {
  return user.anto_transfer === 1 ? true : false;
});

const loading = ref<boolean>(false);
// const gameChannel = ref<any[]>([]);

const gameList = computed(() => {
  let result: any[] = [];
  if (Array.isArray(gameInfoStore.gameTypeList)) {
    result = gameInfoStore.gameTypeList.map((item) => ({
      ...item,
      loading: false,
    }));
  }
  return result;
});

// watch(
//   () => gameChannelStore,
//   (newVal) => {
//     let reuslt = [];
//     if (Array.isArray(newVal.gameChannleList)) {
//       reuslt = newVal.gameChannleList.map((item) => ({
//         ...item,
//         loading: false
//       }))
//     }
//     gameChannel.value = reuslt;
//   },
//   {
//     deep: true
//   }
// )

function handelSingleGameRecycling(item: any, index: number,requestId: number = Date.now(),) {
  const { balance, id } = item;
  if (balance <= 0) {
    return;
  }
  loading.value = true;
  // gameChannel.value[index].loading = true;
  walletTransfer({
    amount: balance,
    game_channel_id: [id],
    ty: 1,
    request_id:requestId,
  })
    .then((res: any) => {
      console.log(res);
      if (res.status === "OK") {
        message.success(t("caoZ"));
        updateUserInfo();
        gameInfoStore.updateGameType();
      }
    })
    .catch((err: any) => {
      console.log(err);
    })
    .finally(() => {
      loading.value = false;
    });
}

function handleAutoTransferStatus() {
  switchLoading.value = true;
  editAntoTransferSetting({
    anto_transfer: autoTransferStatus.value ? 2 : 1,
  })
    .then((res: any) => {
      if (res.status === "OK") {
        message.success(t("caoZ-0"));
        updateUserInfo();
      }
    })
    .catch((e: any) => {
      console.log(e);
    })
    .finally(() => {
      switchLoading.value = false;
    });
}
</script>
<style lang="less">
.auo-transfer-panel {
  .wallet-item {
    height: 36px;
    display: flex;
    border-width: 1px;
    border-style: solid;
    border-color: transparent #ccc #ccc transparent;
    font-size: 12px;
  }
  .channel-title {
    display: inline-flex;
    background: #ececec;
    font-size: 14px;
    padding: 0 10px;
    border-right: 1px solid #ccc;
    width: 150px;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
  }
  .channel-balance {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .balance {
      display: block;
      flex: 1;
      text-align: center;
    }
  }
}
</style>
